{% extends "base.html" %}

{% block title %}首页 - 告警系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="jumbotron bg-light rounded-3 shadow-sm p-4">
            <h1 class="display-5 fw-bold">欢迎使用AI视频分析系统</h1>
            <hr class="my-4">
            <p>点击左侧菜单导航到不同功能页面，或直接点击下方快捷链接。</p>
            <div class="d-flex gap-3">
                <a class="btn btn-primary btn-lg" href="/alerts" role="button">
                    <i class="bi bi-bell me-2"></i>查看告警列表
                </a>
                <!-- <a class="btn btn-outline-secondary btn-lg" href="/data-analysis" role="button">
                    <i class="bi bi-bar-chart me-2"></i>数据分析
                </a> -->
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card text-center h-100">
            <div class="card-body">
                <i class="bi bi-bell fs-1 text-primary mb-3"></i>
                <h5 class="card-title">实时告警</h5>
                <p class="card-text">及时接收和处理设备告警信息</p>
                <a href="/alerts" class="btn btn-outline-primary">查看详情</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card text-center h-100">
            <div class="card-body">
                <i class="bi bi-bar-chart fs-1 text-success mb-3"></i>
                <h5 class="card-title">设备管理</h5>
                <p class="card-text">接收设备心跳，进行设备管理</p>
                <a href="/devicemanage" class="btn btn-outline-success">查看详情</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card text-center h-100">
            <div class="card-body">
                <i class="bi bi-gear fs-1 text-info mb-3"></i>
                <h5 class="card-title">视频管理通道</h5>
                <p class="card-text">不同设备配置视频通道</p>
                <a href="/video-channels" class="btn btn-outline-info">查看详情</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-6 col-lg-3 mb-4">
        <div class="card text-center h-100">
            <div class="card-body">
                <i class="bi bi-gear fs-1 text-info mb-3"></i>
                <h5 class="card-title">参数配置</h5>
                <p class="card-text">配置参数同步设备</p>
                <a href="/parameterconfig" class="btn btn-outline-info">查看详情</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}